<template>
  <div>
    <form action="/" ref='search_h'>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div>
        <cinema-data 
            :cinemasList=getCinemasList
            :height="search_height" 
            :key="value"
            >
        </cinema-data>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant"; 
import cinemaData from './cinemaData.vue';
import BetterScroll from 'better-scroll'

export default {
  components: { cinemaData },
  data() {
    return {
      value: "",
      search_height: "480px",
      kaa: null
    };
  },
  // 计算属性
  computed:{
    getCinemasList(){
        
        if(this.value){
             return this.$store.state.cinemas.filter(item => 
                item.name.toUpperCase().includes(this.value.toUpperCase()) ||
                item.address.toUpperCase().includes(this.value.toUpperCase())
            )
        }
        
    }
  },
  updated(){
    if(this.value)
        this.slider();
    // console.log("润滑");
  },
  methods: {
    onSearch(val) {
      // 搜索时触发
    },
    onCancel() {
      // 取消时触发
      this.$router.back()
    },
    slider() {
      // 等到DOM创建完成后执行  --让滑动更加顺畅
      this.$nextTick(() => {
        new BetterScroll(".bianduan", {
          scrollbar: {
            fade: true, // 显示出滚动条
          },
        });
      });
    },
  },
  mounted() {
    console.log("AAA",this.$refs.search_h.scrollHeight);
    this.search_height = document.querySelector('#box-h').offsetHeight-
            this.$refs.search_h.scrollHeight-
            document.querySelector('#nav-h').offsetHeight+'px';


    // 判断是否是第一次请求或者更换了城市
    // console.log("----->>"+this.$store.state.cinemas);
    if (!this.$store.state.cinemas) {
      // 利用vuex的封装异步获取数据
      this.$store.dispatch("getChinemaData").then((ref) => {
        console.log("搜索功能 -- 请求成功");
      });
    } else {
      console.log("搜索功能 -- 使用缓存成功");
        // this.slider();
    }
    // console.log(this.$store.state.cinemas);
  },
};
</script>